<script setup lang="ts">
const props = defineProps<{
  title: string
  description: string
  icon?: string
}>()
const emit = defineEmits<{
  (e: 'open'): void
}>()
</script>

<template>
  <button
    class="tool-card-hover w-full text-left p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm hover:shadow-md transition-all duration-200 hover:border-primary/30 dark:hover:border-primary/30"
    @click="emit('open')"
  >
    <div class="flex items-start space-x-3">
      <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 dark:bg-primary/20 text-primary flex items-center justify-center">
        <i :class="['fa', icon || 'fa-cog']"></i>
      </div>
      <div class="flex-1">
        <h3 class="text-base font-semibold mb-1">{{ title }}</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ description }}</p>
      </div>
    </div>
  </button>
</template>

<style scoped></style>